<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전파</title>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById("level1").addEventListener(
				'click',
				react,
				//false	// Bubble Phase Event Listener
				true	// Captuer Phase Event Listener
		);
		document.getElementById("level2").addEventListener(
				'click',
				react,
				true
		);
		document.getElementById("anImage").addEventListener(
				'click',
				react,
				true
		);
	};
	
	function react(event) {
		document.getElementById("info").innerHTML
			+= "I woof at " + event.currentTarget.id + "!<br/>";
	}
</script>
</head>
<body>

	<div id="level1">
		<div id="level2">
			<img id="anImage" width="300" height="100"/>
		</div>
	</div>
	
	<div id="info"></div>

</body>
</html>